"use client";

import { useAuthStore, Role } from '@/lib/authStore';

interface ProtectedRouteProps {
  children: React.ReactNode;
  requiredRoles?: Role[];
  fallback?: React.ReactNode;
}

export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({
  children,
  requiredRoles,
  fallback = <div>您没有权限访问此页面</div>,
}) => {
  const { isAuthenticated, hasAnyRole } = useAuthStore();

  // 如果不需要特定角色，只需要登录
  if (!requiredRoles) {
    return isAuthenticated ? <>{children}</> : <>{fallback}</>;
  }

  // 如果需要特定角色
  if (!isAuthenticated) {
    return <>{fallback}</>;
  }

  if (!hasAnyRole(requiredRoles)) {
    return <>{fallback}</>;
  }

  return <>{children}</>;
}; 